<template>
  <van-nav-bar title="商品分类" />
  <div class="wrap">
    <div class="left">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="(item, index) in sortList" :key="index" :title="item" />
      </van-sidebar>
    </div>
    <div class="right">
      <!-- 列表渲染 -->
      <!-- <van-row>
        <van-col
          span="12"
          v-for="item in goodsList"
          :key="sortList.goods_id"
          @click="DetailFn(item)"
        >
          <img :src="item.img_big_logo" />
          <p><van-text-ellipsis :content="item.title" /></p>
          <p>{{ item.current_price }}</p>
        </van-col>
      </van-row> -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-row>
          <van-col
            span="12"
            v-for="item in goodsList"
            :key="sortList.goods_id"
            @click="DetailFn(item)"
          >
            <img :src="item.img_big_logo" />
            <p><van-text-ellipsis :content="item.title" /></p>
            <p>{{ item.current_price }}</p>
          </van-col>
        </van-row>
      </van-list>
    </div>
  </div>
</template>
<script>
import http from "@/utils/http.js";
export default {
  data() {
    return {
      active: 0,
      sortList: [],
      goodsList: [],
      current: 0,
      loading: false,
      finished: false,
      count: 1
    };
  },
  methods: {
    DetailFn(item) {
      console.log(item.goods_id);
      this.$router.push("/detail?id=" + item.goods_id);
    },
    onLoad() {
      console.log("count:", this.count, "current:", this.current);
      if (this.current == this.count) {
        this.finished = true;
      } else {
        this.current++;
        http
          .request({
            url: "/goods/list",
            method: "GET",
            params: {
              current: this.current,
              category: this.sortList[this.active]
            }
          })
          .then((v) => {
            // console.log(v.data);
            console.log("onLoad");
            this.goodsList.push(...v.data.list);
            this.loading = false;
          });
      }
    }
  },
  created() {
    http
      .request({
        url: "/goods/category",
        method: "GET"
      })
      .then((v) => {
        // console.log(v.data);
        this.sortList = v.data.list;
      });
  },
  watch: {
    active: {
      handler() {
        // this.finished = false;
        http
          .request({
            url: "/goods/list",
            method: "GET",
            params: {
              category: this.sortList[this.active]
            }
          })
          .then((v) => {
            console.log("watch");
            this.goodsList = v.data.list;
            this.count = v.data.total;
            console.log(this.count);
          });
      },
      immediate: true
    }
  }
};
</script>
<style lang="css" scoped>
img {
  width: 100%;
}
.wrap {
  display: flex;
}
.wrap > .left {
  height: calc(100vh - 100px);
  overflow: auto;
}
.wrap > .right {
  flex: 1;
  height: calc(100vh - 100px);
  overflow: auto;
}
</style>
